<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Gentelella Alela! | </title>

    <!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- Animate.css -->
    <link href="../vendors/animate.css/animate.min.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../build/css/custom.min.css" rel="stylesheet">

    <script src="../vendors/jtopo-0.4.8-min.js"></script>
    <script src="../vendors/jquery/dist/jquery.min.js"></script>
  </head>

  <body class="login">
    <div>
      <a class="hiddenanchor" id="signup"></a>
      <a class="hiddenanchor" id="signin"></a>
   
      <canvas id="canvas" width="1200px" height="600px">
      <script>
        $(document).ready(function(){                    
            var canvas = document.getElementById("canvas");
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            //showJTopoToobar(stage);
            var scene = new JTopo.Scene();
            stage.add(scene);
            //scene.background = "images/paypal.png";
            
            var cloudNode = new JTopo.Node('root');
            cloudNode.fontColor="128,128,128";
            cloudNode.font="20px";
            cloudNode.setSize(30, 26);
            cloudNode.setLocation(360,230);            
            cloudNode.layout = {type: 'circle', radius: 150};
            
            scene.add(cloudNode);
            
            for(var i=1; i<4; i++){
                var node = new JTopo.CircleNode('host' + i);
                node.fillStyle = '200,255,0';
                node.fontColor="128,128,128";
                node.radius = 15;
                node.setLocation(scene.width * Math.random(), scene.height * Math.random());
                node.layout = {type: 'circle', radius: 80};
                
                scene.add(node);                                
                var link = new JTopo.Link(cloudNode, node);
                scene.add(link);
                
                for(var j=0; j<6; j++){
                    var vmNode = new JTopo.CircleNode('vm-' + i + '-' + j);
                    vmNode.radius = 10;
                    vmNode.fillStyle = '255,255,0';
                    vmNode.fontColor="128,128,128";
                    vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
                    scene.add(vmNode);                                
                    scene.add(new JTopo.Link(node, vmNode));                            
                }
            }
            JTopo.layout.layoutNode(scene, cloudNode, true);
            
            scene.addEventListener('mouseup', function(e){
                if(e.target && e.target.layout){
                    JTopo.layout.layoutNode(scene, e.target, true);    
                }                
            });
        });                    
    

      </script>
      </canvas>
    

      <div class="login_wrapper">
        <div class="animate form login_form">
          <section class="login_content">
            <form>
              <h1>Login Form</h1>
              <div>
                <input type="text" class="form-control" placeholder="Username" required="" />
              </div>
              <div>
                <input type="password" class="form-control" placeholder="Password" required="" />
              </div>
              <div>
                <a class="btn btn-default submit" href="index.html">Log in</a>
                <a class="reset_pass" href="#">Lost your password?</a>
              </div>

              <div class="clearfix"></div>

              <div class="separator">
                <p class="change_link">New to site?
                  <a href="#signup" class="to_register"> Create Account </a>
                </p>

                <div class="clearfix"></div>
                <br />

                <div>
                  <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
                  <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
                </div>
              </div>
            </form>
          </section>
        </div>

        <div id="register" class="animate form registration_form">
          <section class="login_content">
            <form>
              <h1>Create Account</h1>
              <div>
                <input type="text" class="form-control" placeholder="Username" required="" />
              </div>
              <div>
                <input type="email" class="form-control" placeholder="Email" required="" />
              </div>
              <div>
                <input type="password" class="form-control" placeholder="Password" required="" />
              </div>
              <div>
                <a class="btn btn-default submit" href="index.html">Submit</a>
              </div>

              <div class="clearfix"></div>

              <div class="separator">
                <p class="change_link">Already a member ?
                  <a href="#signin" class="to_register"> Log in </a>
                </p>

                <div class="clearfix"></div>
                <br />

                <div>
                  <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
                  <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
                </div>
              </div>
            </form>
          </section>
        </div>
      </div>
    </div>
  </body>
</html>
